<!-- 创建关键词打标签规则 -->
 <template>
  <div>
    <div class="header-btn">
      <div>{{ title }}</div>
      <div>
        <el-button type="primary" @click="addOrUpdateTask" :loading="addLoading">确认</el-button>
        <el-button type="info" plain @click="goBack">返回</el-button>
      </div>
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right"
      style="position: relative">
      <div class="wrap g-card" style="margin-bottom: 20px">
        <div class="title-header">基础设置</div>
        <el-form-item label="规则名称" prop="aaaa" required>
          <el-input type="text" placeholder="请输入" v-model="form.aaaa" style="width: 600px" />
        </el-form-item>
        <el-form-item label="选择员工" required>
          <select-supermicro ref="checkDigitalEmployee" v-model="scrmPersonSopUserRels"
            :btn-info.sync="supermicroBtnInfo" :is-single-option="isSingleOption"></select-supermicro>
        </el-form-item>
        <el-form-item label="关键词" required>
          <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
            @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" placeholder="请输入">
          </el-input>
          <el-tag v-else class="button-new-tag" size="small" @click="showInput">+ 关键词</el-tag>
          <span style="color:#999;">达到触发次数后才打上标签</span>
        </el-form-item>
        <el-form-item label="触发次数" prop="aaaa" required>
          <el-input-number placeholder="请输入" v-model="form.aaaa" style="width: 200px" :min="0" />
        </el-form-item>
      </div>
      <div class="wrap g-card" style="margin-bottom: 20px">
        <div class="title-header">标签设置</div>
        <el-form-item label="打标签" prop="aaaa" required>
          <!--  :disabled="form.tagGroup.length >= 1" -->
          <tag-group v-model="form.tagGroup" />
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import selectSupermicro from "@/components/selectSupermicro.vue";
export default {
  name: "KeywordTagAdd",
  components: {
    selectSupermicro,
  },
  data() {
    return {
      title: "创建关键词打标签规则",
      addLoading: false,
      // 基础设置
      form: {
        tagGroup: [],
      },
      rules: {},
      scrmPersonSopUserRels: [],
      supermicroBtnInfo: "添加超级企微",
      isSingleOption: false,

      dynamicTags: ["关键词一"],
      inputVisible: false,
      inputValue: "",
    };
  },
  created() {},
  methods: {
    addOrUpdateTask() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.addLoading = true;
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.addLoading = false;
          this.$router.go(-1);
        }
      });
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => this.$refs.saveTagInput.$refs.input.focus());
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    // 返回
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
// .button-new-tag {
//   margin-left: 10px;
//   height: 32px;
//   line-height: 30px;
//   padding-top: 0;
//   padding-bottom: 0;
// }
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>